<template>
  <div>
    <el-button type="primary" style="float: left;" @click="getTree()">移动菜单</el-button>
    <el-dialog :visible.sync="dialogTableVisible" title="移动菜单">
      <el-form ref="row_data" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <!--<el-form-item :label="'父类'" prop="parent_id">-->
        <!--<el-input placeholder="父类" v-model="row_data.parent_id"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="子类" prop="sort_id">-->
        <!--<el-input placeholder="子类" v-model="row_data.son_id"></el-input>-->
        <!--</el-form-item>-->
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"/>
        <el-tree
          ref="tree2"
          :data="data"
          :props="defaultProps"
          :allow-drop="allowDrop"
          :allow-drag="allowDrag"
          :filter-node-method="filterNode"
          class="filter-tree"
          default-expand-all
          draggable
          @node-drag-start="handleDragStart"
          @node-drag-enter="handleDragEnter"
          @node-drag-leave="handleDragLeave"
          @node-drag-over="handleDragOver"
          @node-drag-end="handleDragEnd"
          @node-drop="handleDrop"/>
          <!--<el-form-item>-->
          <!--<el-button type="primary" @click="submitForm('row_data')">立即创建</el-button>-->
          <!--<el-button @click="close()">取消</el-button>-->
          <!--</el-form-item>-->
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { moveTo } from '@/api/shop_admin_auth/adminPage'
import { getPage } from '@/api/shop_admin_auth/adminPage'
import store from '@/store'
export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  props: {
    row_data: {
      type: Object,
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      data2: [],
      data: [],
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      son: {},
      parent: {}
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  // created: function() {
  //   this.getLists()
  // },
  methods: {
    getTree() {
      // const that = this
      this.dialogTableVisible = true
      getPage(store.getters.token, { parent_id: this.row_data }).then(response => {
        // console.log(this.row_data.id)
        var tree = response.data.data
        this.data2 = tree
        // 创建一个根节点数组，将数据添加进去
        this.data = [{
          id: 0,
          title: '全部',
          children: this.data2
        }]
      })
    },
    // submitForm() {
    //   moveTo(store.getters.token, this.row_data.id).then(res => {
    //     this.$emit('getLists')
    //     this.close()
    //   })
    // },
    filterNode(value, data) {
      if (!value) return true
      return data.title.indexOf(value) !== -1
    },
    handleDragStart(node, ev) {
      console.log('drag start', node)
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log('tree drag enter: ', dropNode.label)
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      console.log('tree drag leave: ', dropNode.label)
    },
    handleDragOver(draggingNode, dropNode, ev) {
      console.log('tree drag over: ', dropNode.label)
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log('tree drag end: ', dropNode && dropNode.label, dropType)
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      this.son = draggingNode
      this.parent = dropNode
      moveTo(store.getters.token, { son_id: this.son.data.id, parent_id: this.parent.data.id }).then(res => {
        this.$emit('getLists')
        this.close()
      })
    },
    allowDrop(draggingNode, dropNode, type) {
      return true
    },
    allowDrag(draggingNode) {
      return true
    },
    close() {
      this.$emit('getLists')
      this.dialogTableVisible = false
    }
  }
}
</script>
